<template>
    <div class="icon-text-container">
        <van-icon name="arrow-left" @click="returnAddressList()" />
        <span class="text">修改收货地址</span>
    </div>
    <div class="wrapper">
        <div class="wrapper-top">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="deliveryAddress" name="地址" label="地址" placeholder="请填写地址" />
                    <van-field v-model="doorPlate" type="password" name="门牌号" label="门牌号"
                        placeholder="请填写详细地址，例如1层102室" />
                    <van-field v-model="contactName" name="收货人" label="收货人" placeholder="请填写收货人" />
                    <van-field name="radio" label="性别">
                        <template #input>
                            <van-radio-group v-model="checkedSex" direction="horizontal">
                                <van-radio name="1">先生</van-radio>
                                <van-radio name="2">女士</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                    <van-field label="标签" name="标签">
                        <template #input>
                            <van-radio-group v-model="checkedTag" direction="horizontal">
                                <van-radio name="家">家</van-radio>
                                <van-radio name="学校">学校</van-radio>
                                <van-radio name="公司">公司</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                    <van-field v-model="phoneNumber" name="手机号" label="手机号" placeholder="请填写手机号" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit" @click="beginUpdateAddress()">
                        修改地址
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>

</template>

<script setup>
import http from '../../utils/http';
import { useRouter, useRoute } from 'vue-router';
import { onMounted, ref, toRefs } from 'vue';
import { showDialog } from 'vant';


//数据处理区
//存放表单数据
const contactName = ref();
const deliveryAddress = ref();
const phoneNumber = ref();
const doorPlate = ref();
const checkedSex = ref();
const checkedTag = ref();



const route = useRoute();
const onSubmit = (values) => {};




const userId = localStorage.getItem("userId");
const addressInfo = ref({});
const addressList = async () => {
    try {
        const response = await http.get(`/user/getUserAddresses`,{
                userId:userId,
        });
        addressInfo.value=response.data.data
        contactName.value = addressInfo.value.contactName
        /* showDialog({
            message: '修改成功',
        }).then(() => {
            router.push('/addressList')
        }); */
    }
    catch (error) {
        console.error(error);
    }
};


onMounted(()=>{
    addressList();
})
function beginUpdateAddress(){
    addAddress();
}
//编程路由区
const router = useRouter();

function returnAddressList() {
    router.push('/addressList');
}



</script>

<style lang="scss" scoped>
.wrapper {
    width: 100vw;
    height: 92vh;
    background-color: #F3F3F3;

    .wrapper-top {
        display: inline-block;
        width: 100%;
        margin-top: 20px;
        /*  margin-left: 5px; */
        border-radius: 10px;
    }

}

//顶头一行的样式
.icon-text-container {
    display: flex;
    align-items: center;
    line-height: 50px;
    /* 调整垂直对齐 */
    font-size: 22px;
}

//顶头图标与文字间距
.text {
    font-size: 20px;
    font-weight: bold;
    margin-left: 110px;
    /* 图标和文本之间的间距 */
}

/* ::v-deep(.van-filed) {
    border-radius: 10px;
} */
</style>